<template>
	<view>
		<view class="top">
			<image class="icon" src="@/static/tips.png"></image>
			<view class="desc">你的个人资料为后台管理员录入， 请你输入手机号绑定你的个人信息</view>
		</view>
		<view class="shuru">
			<view class="input">
				<u--input placeholder="请输入手机号" type="number" border="none" v-model="name"
					:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
			</view>
		</view>
		<view class="btn" @click="bind">
			绑定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: ''
			}
		},
		methods: {
			bind() {
				if (!uni.$u.test.mobile(this.name)) return uni.$u.toast('请输入正确的手机号')
				this.$API.bandPerson({
					phone: this.name
				}).then(res => {
					uni.showModal({
						title: '温馨提示',
						content: '绑定成功',
						showCancel:false,
						success: function(res) {
							uni.navigateBack();
						}
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.top {
		margin-top: 150rpx;
		display: flex;
		align-items: flex-start;
		padding: 0 70rpx;

		.icon {
			width: 48rpx;
			height: 48rpx;
			margin-top: 4rpx;
		}

		.desc {
			padding-left: 8rpx;
			flex: 1;
			font-weight: 400;
			font-size: 28rpx;
			color: #606266;
			line-height: 50rpx;
			text-align: left;
		}
	}

	.btn {
		width: 264rpx;
		height: 80rpx;
		background: #30D6C2;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 240rpx;
	}

	.shuru {
		padding: 152rpx 90rpx 0;
	}



	/deep/ .u-input {
		padding: 0 14rpx !important;
		width: 100%;
		height: 90rpx;
		background: #F3F4F6;
		border-radius: 8rpx;
		// text-indent: 24rpx;
	}
</style>